<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>无限极创新资讯分享后台</title>
    <link href="images/style.css" rel="stylesheet" type="text/css" />
    <!-- <script src="build/react.js"></script>
	<script src="build/JSXTransformer.js"></script> -->
    <script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jsapi.js"></script>
    <script type="text/javascript" src="js/corechart.js"></script>      
    <script type="text/javascript" src="js/jquery.gvChart-1.0.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.ba-resize.min.js"></script>
    <script src="js/Chart.js"></script>
    <script type="text/javascript">
        gvChartInit();
        $(document).ready(function(){
            $('#myTable5').gvChart({
                chartType: 'PieChart',
                gvSettings: {
                    vAxis: {title: 'No of players'},
                    hAxis: {title: 'Month'},
                    width: 530,
                    height: 205
                }
            });
        });
    </script>

    <script type="text/javascript">
        gvChartInit();
        $(document).ready(function(){
                $('#myTable1').gvChart({
                    chartType: 'PieChart',
                    gvSettings: {
                    vAxis: {title: 'No of players'},
                    hAxis: {title: 'Month'},
                    width: 530,
                    height: 205
                }
            });
        });
    </script>
</head>
    
<body>     
    <div id="gai-wrap">
        
        <div id="pietitle">RSS饼图</div>
        <div id="linetitle"><span>数据分析表</span></div>
        <!--饼状图-->
        <div id="piebtn"><div id="day">日</div><div id="month">月</div><div id="week">周</div></div>
        <div id="pie">
            <div style="width:530px;margin:0 auto;">
               <table id='myTable5'>
                    <!--<caption>饼状图</caption>-->
                    <thead>
                        <tr>
                            <th></th>
                            <th>总数</th>
                            <th>分享数</th>
                            <th>查看数</th>
                            <th>点赞</th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th></th>
                            <td id="one">540</td>
                            <td id="two">300</td>
                            <td id="three">150</td>
                            <td id="four">150</td>
                        </tr>
                    </tbody>
                </table>  
            </div>
        </div>
        <!--折线图-->
        <div id="line">         
            <canvas id="canvas" height="205" width="530"></canvas>
        </div>
        <div id="texttitle"><span>文章概览</span></div>
        <!--文章概览-->
        <div id="textov">
            <table>
                <thead>
                    <tr>
                        <td>序号</td>
                        <td>日期</td>
                        <td>时间</td>
                        <td>文章数</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td><td>2015年8月22日</td><td>10:08</td><td>151</td>       
                    </tr>
                    <tr>
                        <td>2</td><td>2015年8月22日</td><td>10:08</td><td>151</td>
                    </tr>
                    <tr>
                         <td>3</td><td>2015年8月22日</td><td>10:08</td><td>151</td>
                    </tr>
                    <tr>
                        <td>4</td><td>2015年8月22日</td><td>10:08</td><td>151</td>
                    </tr>
                    <tr>
                        <td>5</td><td>2015年8月22日</td><td>10:08</td><td>151</td>
                    </tr>
                    <tr>
                        <td>6</td><td>2015年8月22日</td><td>10:08</td><td>151</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</body>

<script>
    $("#piebtn div").click(function(){
      $("#piebtn div").css("background-color","white");
      $(this).css("background-color","#DADADA");
      if($(this).attr("id")=="day"){
        $("#myTable5 #one").text("540");
        $("#myTable5 #two").text("300");
        $("#myTable5 #three").text("150");
        $("#myTable5 #four").text("150");
      }
      if($(this).attr("id")=="month"){
        $("#myTable5 #one").text("600");
        $("#myTable5 #two").text("123");
        $("#myTable5 #three").text("321");
        $("#myTable5 #four").text("546");
      }
      if($(this).attr("id")=="week"){
        $("#myTable5 #one").text("1000");
        $("#myTable5 #two").text("562");
        $("#myTable5 #three").text("123");
        $("#myTable5 #four").text("123");
      }
      gvChartInit();
      $(document).ready(function(){
            $('#myTable5').gvChart({
                chartType: 'PieChart',
                gvSettings: {
                    vAxis: {title: 'No of players'},
                    hAxis: {title: 'Month'},
                    width: 530,
                    height: 205
                }
            });
        });
    });
    var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
        var lineChartData = {
            labels : ["总数","分享","查看数","点赞"],
            datasets : [
                
                {
                    label: "My Second dataset",
                    fillColor : "rgba(151,187,205,0.2)",
                    strokeColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    pointHighlightFill : "#fff",
                    pointHighlightStroke : "rgba(151,187,205,1)",
                    data : [500,600,700,400]
                }
            ]

        }

    window.onload = function(){
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myLine = new Chart(ctx).Line(lineChartData, {
            responsive: true
        });
    }
    $("#Drawing_Frame_67082").contents().find("#chartArea").find("#chart").find("#chart");//jquery 方法1
</script>

</html>


